<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>企业环保</el-breadcrumb-item>
                        <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">环保局人员管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" style="background: #fff;padding-top: 10px;height: 46px;">
                        <el-col :span="5" style="margin-left: 20px;">
                            <el-form-item label="人员信息" size="small">
                                <el-input v-model="form.name" placeholder="请输入姓名或手机号或部门" />
                            </el-form-item>
                        </el-col>

                        <el-col :span="6" style="margin-left: 20px;">
                            <el-button size="small" class="sele-but" icon="search" @click="getTableData()">查询</el-button>
                            <el-button size="small" class="empty-but" icon="refresh" @click="reset()">重置</el-button>
                            <el-button size="small" icon="plus" class="add-but" @click="showDialog = true">新增</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div style="background: #fff;">
                    <el-table :data="tableData.rows" style="width: 100%;">
                        <el-table-column align="center" prop="id" label="序号" width="60" type="index" />
                        <el-table-column align="center" prop="organization_structure" label="所属组织结构" />
                        <el-table-column align="center" prop="name" label="姓名" />
                        <el-table-column align="center" prop="telephone" label="电话" />
                        <el-table-column align="center" prop="province" label="省" />
                        <el-table-column align="center" prop="city" label="市" />
                        <el-table-column align="center" prop="area" label="区" />
                        <el-table-column align="center" prop="department" label="部门" />
                        <el-table-column align="center" prop="position" label="职位" />
                        <el-table-column align="center" prop="remarks" label="备注" />
                        <el-table-column align="center" fixed="right" label="操作" width="120">
                            <template #default="item">
                                <el-button link type="primary" icon="edit" size="small" @click="modifyDetail(item.row)">修改</el-button>
                                <el-button link type="danger" icon="delete" size="small" @click="del(item.row)">删除</el-button>
                            </template>
                        </el-table-column>
      </el-table>
<el-pagination style="margin-top: 20%;display: flex;justify-content: flex-end;" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="tableData.total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-main>
</el-container>
      <!--新增弹出框-->
      <el-dialog v-model="showDialog" title="人员信息" width="45%" style="margin-top:3%">
        <div style="width: 80%">
          <el-form ref="fm" :model="form.data" :rules="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
            <el-form-item label="组织机构" required="true" prop="organization_structure">
              <el-input v-model="form.data.organization_structure" style="width:300px" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.data.name" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="电话" required="true" prop="telephone">
              <el-input v-model="form.data.telephone" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="辖区" required="true" prop="areas">
              <el-cascader v-model="form.data.areas" style="width:300px" :options="pcacode"
                           @change="parentchange" :props="defaultProps" :show-all-levels="true" change-on-select>
              </el-cascader>
            </el-form-item>
            <el-form-item label="部门" required="true" prop="department">
              <el-input v-model="form.data.department" style="width:300px" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="职位" required="true" prop="position">
              <el-input v-model="form.data.position" style="width:300px" placeholder="请输入"  />
            </el-form-item>
            <el-form-item label="备注" required="true" prop="remarks">
              <el-input v-model="form.data.remarks" maxlength="300" placeholder="请输入" show-word-limit type="textarea" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button class="sele-but" @click="save()"> 确定 </el-button>
            <el-button class="empty-but" @click="showDialog = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
</div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import  {queryByNameOrByTelephoneOrByDepartment,insertEnvironmentPersonnel,updateEnvironmentPersonnel,
  deleteEnvironmentPersonnel} from '@/api/entPersonManage'
import pca_code from "@/utils/pca-code";
const pcacode = reactive(pca_code);
import {findFromTree} from '@/utils/tools'
import {ElMessageBox,ElMessage} from "element-plus";
    // 新增跳转到新增页面
const defaultProps={lable: 'lable',value: 'id'};
const showDialog = ref(false);
const form = reactive({
    name:'',
    data: {
      areas:[],
      name:'',
      phone:'',
    },
});
const validateTelephoneNumber =() =>{
  return (rule,value,callback)=>{
    if(!value){
      callback(new Error("手机号没填."))
    }else if(!/^1\d{10}$/.test(value)){
      callback(new Error("手机号码格式错误."))
    }else{
      callback();
    }
  }
}
const ruleForm =reactive({
  name:[{required:true,message:"请输入姓名",trigger:"blur"}],
  telephone:[{required:true,validator:validateTelephoneNumber(),trigger:"blur"}],
});
// 表格假数据
const tableData = reactive({
  rows:[],
  total:0,
});
const reset = () =>{
  getTableData();
  form.data = {
    areas:[],
    name:'',
    phone:'',
  }
  form.name='';
}
const parentchange = () =>{
  form.data.province_id = form.data.areas[0];
  form.data.province = findFromTree(pcacode , form.data.areas[0]).label;
  form.data.city_id = form.data.areas[1];
  form.data.city = findFromTree(pcacode,form.data.areas[1]).label;
  form.data.area_id = form.data.areas[2];
  form.data.area = findFromTree(pcacode,form.data.areas[2]).label;
};

const getTableData = () =>{
  let obj = form.name?{name:form.name}:{};
  queryByNameOrByTelephoneOrByDepartment(obj)
      .then(res=>{
        tableData.rows = res?.data;
      })
};
const modifyDetail =(row) =>{
  form.data = row;
  form.data.areas = [form.data.province_id,form.data.city_id,form.data.area_id];
  showDialog.value=true;
}
const fm = ref()
const save = () =>{
  fm.value.validate(valid=>{
    if(valid){
      if(form.data.id){
        updateEnvironmentPersonnel(form.data).then(res=>{
          if(res.code==200){
            ElMessage.success("保存成功!");
            revert();
            showDialog.value=false;
          }else{
            ElMessage.error(res.msg);
          }
        })
      }else{
        insertEnvironmentPersonnel(form.data).then(res=>{
          if(res.code==200){
            ElMessage.success("保存成功!");
            revert();
            showDialog.value=false;
          }else{
            ElMessage.error(res.msg);
          }
        })
      }
    }
  })
}
const del = (item) =>{
  ElMessageBox.confirm("确定要删除吗?")
      .then(() => {
        deleteEnvironmentPersonnel({id:item.id}).then(res=>{
          if(res.code==200){
            ElMessage.success("删除成功!");
            getTableData();
          }else{
            ElMessage.error(res.msg);
          }
        })
      })
}
const revert = () =>{
  form.data = {
    areas:[],
    name:'',
    phone:'',
  }
  getTableData();
}
onMounted(()=>{
  getTableData();
})
</script>
<style scoped>
    /* 面包屑字体颜色更改 */
    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */
    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */
    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */
    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }
    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */
    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
